/**
 * Created by imac13 on 18/12/27.
 */
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import { Link } from 'react-router-dom'
import { actionCreators } from './store'
import {actionCreators as loginActionCreators} from '../../pages/login/store'
import {
    HeaderWrapper,Logo,Nav,NavItem,NavSearch,SearchInfo,SearchInfoTitle,
    SearchInfoSwitch,SearchInfoList,SearchInfoItem,Action,ActionItem,SearchWrapper
} from './style'


class Header extends  PureComponent {
    getListArea () {
        const {focused,list,mouseIn,page,totalPage,handleMouseEnter,handleMouseLeave,handleChangePage} = this.props;
        const newList = list.toJS();
        const pageList = [];
        if (newList.length) {
            for (let i = (page-1) * 10;i < page*10;i++){
                pageList.push(
                    <SearchInfoItem key = {newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter = {handleMouseEnter}
                    onMouseLeave = {handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick = {()=>{handleChangePage(page,totalPage,this.spinIcon)}}>
                            <i ref={(icon)=>{this.spinIcon = icon}} className="iconfont spin">&#xe851;</i>
                            换一批
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            )
        }else {
            return null
        }
    };
    render () {
        const {focused,FocusInput,BlurInput,list,login,logout} = this.props;
        return (
            <HeaderWrapper>
                <Link to="/">
                    <Logo/>
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    {
                        login ? <NavItem className="right" onClick = {logout}>退出</NavItem> : <Link to="/login"><NavItem className="right">登录</NavItem></Link>
                    }
                    <NavItem className="right">
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in = {focused}
                            timeout = {200}
                            classNames = 'slide'
                        >
                            <NavSearch
                                className={focused ? 'focused': '' }
                                onFocus={()=>{FocusInput(list)}}
                                onBlur ={BlurInput}
                            >
                            </NavSearch>
                        </CSSTransition>
                        <i className={focused ? 'focused iconfont search': 'iconfont search' }>&#xe614;</i>

                        {this.getListArea()}
                    </SearchWrapper>
                </Nav>
                <Action>
                    <Link to="/write">
                        <ActionItem className="writing">
                            <i className="iconfont">&#xe615;</i>
                            写文章
                        </ActionItem>
                    </Link>
                    <ActionItem className="reg">注册</ActionItem>
                </Action>
            </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        focused:state.get('header').get('focused'),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        mouseIn:state.getIn(['header','mouseIn']),
        totalPage:state.getIn(['header','totalPage']),
        login:state.getIn(['login','login']),
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        FocusInput (list) {
            if (list.size === 0){
                dispatch(actionCreators.getList())
            }
            dispatch(actionCreators.getFocusInput())
        },
        BlurInput () {
            dispatch(actionCreators.getBlurInput())
        },
        handleMouseEnter () {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave () {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage (page,totalPage,spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig,'');
            if (originAngle) {
                originAngle = parseInt(originAngle,10)
            }else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate('+(originAngle)+'deg)'
            if (page < totalPage){
                dispatch(actionCreators.changePage(page + 1))
            }else {
                dispatch(actionCreators.changePage(1))
            }

        },
        logout () {
            dispatch(loginActionCreators.logout())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)